<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<div class="article-start-box">
    <span class="categery">分类栏目</span>
    <select style="position: absolute;z-index: 1;margin-left: 40px;"  class="choose"
            onmousedown="if(this.options.length>6){this.size=7}" onblur="this.size=0" onchange="this.size=0">
        <option value="volvo">文学集</option>
        <option value="saab">哲学</option>
        <option value="opel">雅思</option>
        <option value="audi">大学网奥数大学网奥数</option>
        <option value="volvo">文学集</option>
        <option value="saab">哲学</option>
        <option value="opel">雅思</option>
        <option value="audi">大学网奥数</option>
    </select>
</div>-->


<span style="font-size:14px;"><div id="app">
    <div class="fl">
        <h2>自定义的下拉框</h2>
        <custom-select v-bind:list="list1"></custom-select>
    </div>
</div></span>

<script src="js/lib/vue.min.js"></script>
<script>
    Vue.component( "custom-select",{         //可小驼峰可烤串
        data:function(){                     //data为function,返回私有对象
            return {
                selectShow:false,
                val:''
            };
        },
        props:['list'],                  //此处必须(小)驼峰
        template:'<section class="list">\n\
            <div class="searchIpt">\n\
            <div class="clearFix">\n\
            <input type="text" :value="val">\n\
            <span type="button" @click="selectShow = !selectShow">go</span>\n\
            <span></span>\n\
            </div>\n\
            <custom-list v-show="selectShow" v-bind:aaa="list" v-on:receive="changeValueHandle"></custom-list>\n\
            </div>\n\
            </section>',
        methods:{
            changeValueHandle : function(item){
                this.val=item;    //需要this
                this.selectShow = false;
            }
        }

    });
    Vue.component('custom-list',{
        props:["aaa"],                        //传自定义属性名
        template:'<ul>\n\
               <li v-for="item of aaa" @click="selectValueHandle(item)">{{item}}</li>\n\
            </ul>',
        methods:{
            selectValueHandle:function(item){
                this.$emit('receive',item)   //$emit告诉父级发生的（自定义）事件，v-on在父组件绑定（自定义）事件
            }
        }
    });
    var data = {
        list1:['GPRS-DTU-300','普乐特控制器类型B','普乐特C','GPRS-DTU-300','普乐特控制器类型B','普乐特C','GPRS-DTU-300','普乐特控制器类型B','普乐特C']
    };
    var vm = new Vue({
        el:'#app',
        data:data
    })
</script>
</body>
</html>